<template>
  <div class="acDC-center content-sub">
    <div class="acDC-title">
      <span>中央空调系统数据驾驶舱</span>
    </div>
    <div class="acDC-row">
      <div class="acDC-tag-name">
        <span>安 全</span>
      </div>
      <div class="acDC-row-item">
        <div class="acDC-row-title">
          <span>安全运行情况总览</span>
        </div>
        <div class="acDC-row-body">
          <div class="acDC-data-card">
            <i class="fa fa-cube" aria-hidden="true"></i>
            <div>
              <span>水冷机组</span>
              <span>
                累计
                <strong>96</strong>天
              </span>
            </div>
            <i class="fa fa-toggle-on" aria-hidden="true" style="color: aqua"></i>
            <span>
              开机状态:
              <span style="color: aqua">开机</span>
            </span>
            <i
              class="fa fa-exclamation-triangle"
              style="color: #ffd100; font-size: 16px;"
              aria-hidden="true"
            ></i>
            <span class="acDC-row-tag">5</span>
          </div>
          <div class="acDC-data-card">
            <i class="fa fa-cube" aria-hidden="true"></i>
            <div>
              <span>风冷机组</span>
              <span>
                累计
                <strong>289</strong>天
              </span>
            </div>
            <i class="fa fa-toggle-off" aria-hidden="true" style="color: aqua"></i>
            <span>开机状态: 停机</span>
          </div>
          <div class="acDC-data-card">
            <i class="fa fa-cube" aria-hidden="true"></i>
            <div>
              <span>冷媒机组</span>
              <span>
                累计
                <strong>371</strong>天
              </span>
            </div>
            <i class="fa fa-toggle-on" aria-hidden="true" style="color: aqua"></i>
            <span>
              开机状态:
              <span style="color: aqua">开机</span>
            </span>
          </div>
        </div>
      </div>
      <div class="acDC-row-item">
        <div class="acDC-row-title">
          <span>项目执行情况</span>
          <span>查看所有任务</span>
        </div>
        <div class="acDC-row-body">
          <div class="acDC-main-data">
            <div>
              <p>项目总数</p>
              <p>20</p>
            </div>
            <div>
              <p>已完成</p>
              <p>2</p>
            </div>
            <div>
              <p>执行中</p>
              <p>12</p>
            </div>
            <div>
              <p>未执行</p>
              <p>5</p>
            </div>
            <div>
              <p>已延期</p>
              <p>3</p>
            </div>
            <div>
              <p>完成率</p>
              <progress value="0.2"></progress> 10%
            </div>
            <div>
              <p>延期率</p>
              <progress value="0.2" class="progress-red"></progress> 13%
            </div>
          </div>
          <div class="acDC-main-table">
            <table>
              <thead>
                <tr>
                  <th>名称</th>
                  <th>类型</th>
                  <th>阶段</th>
                  <th>进度</th>
                  <th>计划完成时间</th>
                  <th>已延期</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1#冷冻主机保养</td>
                  <td>常规项目</td>
                  <td>执行中</td>
                  <td>
                    <progress value="0.2" class="progress-short"></progress>
                  </td>
                  <td>2019-03-16</td>
                  <td>
                    20
                    <progress value="0.2" class="progress-red progress-short"></progress>
                  </td>
                </tr>
                <tr>
                  <td>水冷主机改装为变频主机</td>
                  <td>持续改进项目</td>
                  <td>公开招标</td>
                  <td>
                    <progress value="0.2" class="progress-short"></progress>
                  </td>
                  <td>2019-04-07</td>
                  <td>
                    40
                    <progress value="0.4" class="progress-red progress-short"></progress>
                  </td>
                </tr>
                <tr>
                  <td>冷却塔加装热回收装置</td>
                  <td>持续改进项目</td>
                  <td>方案制定</td>
                  <td>
                    <progress value="0.2" class="progress-short"></progress>
                  </td>
                  <td>2019-04-10</td>
                  <td>
                    34
                    <progress value="0.34" class="progress-red progress-short"></progress>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="acDC-row-item" style="flex-grow: 0">
        <div class="acDC-row-title">
          <span>异常情况</span>
        </div>
        <div class="acDC-row-body">
          <div class="acDC-list">
            <i class="fa fa-square-o" aria-hidden="true"></i>
            <span>温度传感器异常...</span>
            <span>未处理</span>
            <i class="fa fa-user-circle" aria-hidden="true"></i>
          </div>
          <div class="acDC-list">
            <i class="fa fa-check-square" aria-hidden="true"></i>
            <span>压力传感器异常...</span>
            <span>未处理</span>
            <i class="fa fa-user-circle" aria-hidden="true"></i>
          </div>
          <div class="acDC-list">
            <i class="fa fa-check-square" aria-hidden="true"></i>
            <span>回风温度传感器故障...</span>
            <span>未处理</span>
            <i class="fa fa-user-circle" aria-hidden="true"></i>
          </div>
          <div class="acDC-list">
            <i class="fa fa-square-o" aria-hidden="true"></i>
            <span>扩展模块通讯异常...</span>
            <span>未处理</span>
            <i class="fa fa-user-circle" aria-hidden="true"></i>
          </div>
          <div class="acDC-list">
            <i class="fa fa-square-o" aria-hidden="true"></i>
            <span>送风压开关保护...</span>
            <span>未处理</span>
            <i class="fa fa-user-circle" aria-hidden="true"></i>
          </div>
          <p class="acDC-list-more">查看更多</p>
        </div>
      </div>
    </div>
    <div class="acDC-row">
      <div class="acDC-tag-name">
        <span>质 量</span>
      </div>
      <div class="acDC-row-item">
        <div class="acDC-row-title">
          <span>区域室温总览</span>
        </div>
        <div class="acDC-row-body acDC-weather">
          <div class="acDC-weather-data">
            <div class>
              <p>室外环境</p>
              <img src="~@/assets/w.png" alt>
              <div class="acDC-inline-data">
                <p>大气压：1070 hPa</p>
                <p>温&emsp;度：21.3 ℃</p>
                <p>湿&emsp;度：78 %</p>
              </div>
            </div>
            <div class="acDC-">
              <p>室内环境质量</p>
              <div>
                <div class="acDC-inline-data">
                  <img src="~@/assets/t.png" alt>
                  <span>25.5℃</span>
                  <p>平均温度</p>
                </div>
                <div class="acDC-inline-data">
                  <img src="~@/assets/h.png" alt>
                  <span>56%</span>
                  <p>相对湿度</p>
                </div>
              </div>
            </div>
          </div>
          <div class="acDC-weather-chart">
            <p>重要区域环境温度趋势</p>
            <div id="chart1"></div>
          </div>
        </div>
      </div>
      <div class="acDC-row-item" style="flex-grow: 0">
        <div class="acDC-row-title">
          <span>主要区域室内情况一览</span>
        </div>
        <div class="acDC-row-body acDC-temp-area">
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 病区三层
            </span>
            <span>26.4℃</span>
          </div>
          <div style="border: 1px solid #fb6260">
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 发热门诊
            </span>
            <span style="background-color: #fb6260;color: #fff">28.5℃</span>
          </div>
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 门诊1层大厅
            </span>
            <span>26.3℃</span>
          </div>
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 点滴
            </span>
            <span>25.5℃</span>
          </div>
          <div style="border: 1px solid #58a3f7">
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 3#手术室
            </span>
            <span style="background-color: #58a3f7;color: #fff">22.5℃</span>
          </div>
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> ICU
            </span>
            <span>24.5℃</span>
          </div>
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 传染病区
            </span>
            <span>26.1℃</span>
          </div>
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 内科1#诊室
            </span>
            <span>25.4℃</span>
          </div>
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 传染病2区
            </span>
            <span>26.5℃</span>
          </div>
          <div>
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 内科2#诊室
            </span>
            <span>25.5℃</span>
          </div>
        </div>
      </div>
      <div class="acDC-row-item" style="flex-grow: 0">
        <div class="acDC-row-title">
          <span>不合格点位情况</span>
        </div>
        <div class="acDC-row-body acDC-temp-area acDC-temp-area2">
          <div style="border: 1px solid #fb6260">
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 住院楼10层1002
            </span>
            <span style="background-color: #fb6260;color: #fff">28.7℃</span>
          </div>
          <div style="border: 1px solid #fb6260">
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 住院楼21层2112
            </span>
            <span style="background-color: #fb6260;color: #fff">26.7℃</span>
          </div>
          <div style="border: 1px solid #fb6260">
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 住院楼19层1904
            </span>
            <span style="background-color: #fb6260;color: #fff">26.5℃</span>
          </div>
          <div style="border: 1px solid #fb6260">
            <span>
              <i class="fa fa-plus-square" aria-hidden="true"></i> 门诊楼4层403
            </span>
            <span style="background-color: #fb6260;color: #fff">27.1℃</span>
          </div>
        </div>
      </div>
    </div>
    <div class="acDC-row">
      <div class="acDC-tag-name">
        <span>成 本</span>
      </div>
      <div class="acDC-row-item" style="flex-grow: 0">
        <div class="acDC-row-title">
          <span>运行总览</span>
        </div>
        <div class="acDC-row-body acDC-bottom-item">
          <div>
            <div class="acDC-data-card2">
              <p>
                <span>2018-12-03至2019-4-16</span><span>￥<strong>63.0</strong>万</span>
              </p>
              <p>
                <i class="fa fa-bolt" aria-hidden="true"></i><i class="fa fa-fire" aria-hidden="true"></i><i class="fa fa-tint" aria-hidden="true"></i>
              </p>
              <p>
                <span><strong>75.4</strong>万kWh</span>
                <span><strong>3.15</strong>万m³</span>
                <span><strong>0</strong>万m³</span>
              </p>
            </div>
            <div class="acDC-data-card2" style="background-color: #ff9933">
              <p>
                <span>昨日</span><span>￥<strong>3560.2</strong></span>
              </p>
              <p>
                <i class="fa fa-bolt" aria-hidden="true"></i><i class="fa fa-fire" aria-hidden="true"></i><i class="fa fa-tint" aria-hidden="true"></i>
              </p>
              <p>
                <span><strong>4523.3</strong>kWh</span><span><strong>121.2</strong>m³</span><span><strong>0</strong>m³</span>
              </p>
            </div>
          </div>
          <div>
            <div id="chart2"></div>
            <p class="acDC-bottom-data-line">
              总节能量（kgce）20386.7
              <svg width="44" height="44">
                <circle
                  cx="22"
                  cy="22"
                  r="17"
                  stroke-width="5"
                  stroke="rgba(255,255,255,.3)"
                  fill="none"
                ></circle>
                <text x="10" y="28" fill="#fff" font-size="12">22%</text>
                <circle
                  id="data-p"
                  cx="22"
                  cy="22"
                  r="17"
                  stroke-width="5"
                  stroke="#00A5E0"
                  fill="none"
                  transform="matrix(0,-1,1,0,0,44)"
                  stroke-dasharray="0 1069"
                ></circle>
              </svg>
              整体节能率
            </p>
          </div>
          <div>
            <div id="chart3"></div>
          </div>
        </div>
      </div>
      <div class="acDC-row-item">
        <div class="acDC-row-title">
          <span>
            <span class="acDC-button-group">
              <button class="acDC-select-button">日</button><button>周</button><button>月</button><button>年</button>
            </span>
            <input class="acDC-input" type="text" value="2019-03-01至2019-04-16">
          </span>
          <span>查看所有</span>
        </div>
        <div class="acDC-row-body acDC-bottom-item">
          <div class="ac-bottom-table">
            <p>
              <i class="fa fa-thumbs-down" aria-hidden="true" style="color:#fb6260"></i> 空调不良使用习惯排行
            </p>
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>类型</th>
                  <th>被动关闭次数</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>骨科1诊室</td>
                  <td>56</td>
                  <td>查看</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>眼鼻喉科3诊室</td>
                  <td>45</td>
                  <td>查看</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>后勤部102</td>
                  <td>36</td>
                  <td>查看</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>行政部305</td>
                  <td>31</td>
                  <td>查看</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="ac-bottom-table">
            <p>
              <i class="fa fa-thumbs-up" aria-hidden="true" style="color:#0299fc"></i> 空调良好使用习惯排行
            </p>
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>类型</th>
                  <th>被动关闭次数</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>骨科1诊室</td>
                  <td>56</td>
                  <td>查看</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>眼鼻喉科3诊室</td>
                  <td>45</td>
                  <td>查看</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>后勤部102</td>
                  <td>36</td>
                  <td>查看</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>行政部305</td>
                  <td>31</td>
                  <td>查看</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "hospitalD",
  data() {
    return {};
  },
  components: {},
  mounted: function() {
    var chart1 = echarts.init(document.getElementById('chart1'));
  var chart2 = echarts.init(document.getElementById('chart2'));
  var chart3 = echarts.init(document.getElementById('chart3'));
  var option_line = {
      tooltip: {
        trigger: 'axis'
      },
      color: ['#41bafd','#c06ed0','#30ff98','#ffe730'],
      legend: {
        data:['ICU','手术室','血液科','新生儿科'],
        bottom: 0,
        textStyle: {
          color: '#ffffff'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        top: '8%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['00:00','00:15','00:30', '00:45','01:00', '01:15','01:30','01:45', '02:00','02:15', '02:30','02:45', '03:00','03:15', '03:30','03:45', '04:00','04:15', '04:30','04:45', '05:00','05:15', '05:30','05:45', '06:00','06:15' ,'06:30','06:45', '07:00', '07:15','07:30','07:45', '08:00','08:15'],
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.7)'
          }
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255,255,255,.7)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      },
      series: [{
        name: 'ICU',
        data: [ 24.1, 24.2, 24.2, 24.2, 24.3, 24.6, 24.3, 24.6, 24.8, 24.9, 24.8, 24.9, 25, 25.1, 24.9, 24.9, 25.2, 25.1, 25.3, 25.3, 25.8, 24.9, 25.3, 25.3, 25.2, 25.1, 25.0, 24.9, 25.2, 25.2, 25.2, 25.3, 25.6, 25.3, 25.2, 24.8, 24.9, 24.8, 24.9, 25, 25.1, 24.9, 24.9],
        type: 'line',
        symbol: 'circle'
      },{
      data: [24.1, 24.2, 24.2, 24.2, 24.3, 24.6, 24.3, 24.6, 24.8, 24.9, 24.8, 24.9, 25, 25.1, 24.9, 24.9, 25.2, 25.1, 25.3,  24.6, 25.8, 24.9, 25.3, 25.3, 25.2, 25.1, 25.0, 24.9, 25.2, 25.2, 25.2, 25.3, 25.6, 25.3, 25.2, 24.8, 24.9, 24.8, 24.9, 25, 25.1, 24.9, 24.9],
        name: '手术室',
        type: 'line',
        symbol: 'circle'
      },{
      data: [18.1, 18.1, 18.1, 18.2, 18.3, 18.4, 18.3, 18.6, 18.8, 18.9, 18.8, 18.9, 19.2, 19.1, 19.9, 20.9, 21.2, 21.1, 21.6, 22.0, 22.1, 22.3, 22.6,  22.7, 22.9, 23.1, 23.3, 23.4, 23.5, 23.2, 23.5, 23.7, 23.9, 24.3, 24.4, 24.5, 24.6, 24.8, 24.9, 25, 25.1, 24.9, 24.9],
        name: '血液科',
        type: 'line',
        symbol: 'circle'
      },{
        data: [18.4, 18.3, 18.3, 18.6, 18.6, 18.6, 18.3,  18.8, 18.9, 19, 19.1, 19.9, 19.9, 20.2, 20.1, 20.3, 20.4, 20.6, 20.3, 20.6, 20.8, 20.9, 21.3, 21.3, 21.2, 21.5, 21.7, 21.9, 22.2, 22.2, 22.5, 22.7, 22.9, 23.3, 23.5, 23.8, 23.9, 23.8, 24.2, 24.3, 24.2, 24.5, 24.7],
        name: '新生儿科',
        type: 'line',
        symbol: 'circle'
      }
      ]
    };
    chart1.setOption(option_line);

    var option_funnel = {
      color: ['#4fa0fd','#5bcb74','#fad33b','#485488'],
      title: {
        text: '各机组节能量占比情况',
        subtext: '(kgce)',
        left: 'center',
        textStyle: {
          color: '#ffffff',
          fontSize: 16,
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
      },
      legend: {
          show: false,
          data: ['水冷机组','风冷机组','冷媒机组','末端']
      },
      calculable: true,
      series: [
          {
              name:'漏斗图',
              type:'funnel',
              left: '0%',
              top: 60,
              //x2: 80,
              bottom: 10,
              width: '100%',
              // height: {totalHeight} - y - y2,
              min: 0,
              max: 100,
              minSize: '10%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                  show: true,
                  normal: {
                    position:'inside',
                    formatter: '{b} {c}%'
                  },
                  emphasis: {
                    position: 'inside',
                    formatter: '{c}%',
                  }
              },
              labelLine: {
                  length: 10,
                  lineStyle: {
                      width: 1,
                      type: 'solid'
                  }
              },
              itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 0
              },
              emphasis: {
                  label: {
                      fontSize: 20
                  }
              },
              data: [
                  {value: Math.round(3058*100/20386.6), name: '冷媒机组'},
                  {value: Math.round(4077.3*100/20386.6), name: '末端'},
                  {value: Math.round(5096.6*100/20386.6), name: '风冷机组'},
                  {value: Math.round(8154.7*100/20386.6), name: '水冷机组'}
              ]
          }
      ]
    };
    chart2.setOption(option_funnel);
    var option_pie = {
      color: ['#4fa0fd','#5bcb74','#fad33b','#485488'],
      title : {
          text: '各机组昨日能耗占比情况(kgce)',
          subtext: '(kgce)',
          x:'center',
          textStyle: {
            color: '#ffffff',
            fontSize: 16,
          }
      },
      tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
          left: 'center',
          top: 'bottom',
          data: ['冷媒机组','水冷机组','风冷机组'],
          textStyle: {
            color: '#ffffff'
          }
      },
    series : [
        {
          name: '',
          type: 'pie',
          radius : ['25%', '45%'],
          center: ['50%', '50%'],
          label: {
              show: true,
                normal: {
                 formatter: '{b} {c}:{d}% '
                }
              },
          data:[
            {value:452.3, name:'冷媒机组'},
            {value:3166.3, name:'水冷机组'},
            {value:904.67, name:'风冷机组'},
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chart3.setOption(option_pie);
    document.getElementById('data-p').setAttribute('stroke-dasharray', Math.PI * 2 * 17 * 0.2 + " " + Math.PI * 2 * 17 * (1- 0.2))
  },
  methods: {}
};
</script>

<style >
/* @import "../../../style/acIndex.css"; */
p {
    margin: 0 0 10px;
}
progress {
  width: 140px;
  height: 10px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #58a3f7; /*IE10*/
}
progress::-moz-progress-bar {
  background: #58a3f7;
  border-radius: 5px;
}
progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}
progress::-webkit-progress-value {
  background: #58a3f7;
  border-radius: 5px;
}
.progress-red {
  color: #fb6260;
}
.progress-red::-moz-progress-bar {
  background: #fb6260;
  border-radius: 5px;
}
.progress-red::-webkit-progress-value {
  background: #fb6260;
  border-radius: 5px;
}
.progress-short {
  width: 60px;
}
.acDC-center {
  position: absolute;
  padding: 20px;
  background-image: linear-gradient(#110f2e,#1b1d55,#110f2e);
  font-size: 14px;
  height: 100vh;
  width: 100%;
}
.acDC-title {
  text-align: center;
}
.acDC-title span {
  display: inline-block;
  position: relative;
  width: 400px;
  height: 36px;
  line-height: 32px;
  color: aqua;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
}
.acDC-title span::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* z-index: -1; */
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.25);
  transform: scaleY(1.1) perspective(30px) rotateX(3deg);
  transform-origin: bottom;
}
.acDC-row {
  margin: 10px 0;
  min-height: 250px;
  border: 1px solid aqua;
  display: flex;
}
.acDC-tag-name {
  width: 40px;
  padding: 0 10px;
  font-size: 18px;
  font-weight: 700;
  background-color: aqua;
  color: #212121;
  align-self: stretch;
  display: flex;
}
.acDC-tag-name span {
  align-self: center;
}
.acDC-row-item {
  border-right: 1px solid rgba(127, 255, 212, 0.5);
  flex-grow: 1;
}
.acDC-row-title {
  /* border-bottom: 1px solid rgba(127, 255, 212, 0.5); */
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.1);
}
.acDC-row-title > span:nth-child(2) {
  font-weight: 300;
  cursor: default;
  color: aqua;
}
.acDC-row-title > span:nth-child(2):hover {
  color: #c1ffff;
}
.acDC-data-card {
  display: flex;
  margin: 10px;
  height: 65px;
  font-size: 12px;
  padding: 0 10px;
  align-items: center;
  border: 1px solid rgba(127, 255, 212, 0.5);
}
.acDC-data-card > * {
  margin: 0 4px;
}
.acDC-data-card > *:first-child {
  color: aqua;
}
.acDC-data-card div {
  min-width: 220px;
  border-bottom: 4px solid #ddd;
  border-image: linear-gradient(
      to right,
      #fb6260 25%,
      #ffd100 26%,
      #ffd100 50%,
      #58a3f7 51%,
      #58a3f7 75%,
      #4bced0 76%
    )
    2;
}
.acDC-data-card div span:first-child {
  font-size: 16px;
  padding-right: 20px;
}
.acDC-data-card div span strong {
  font-size: 20px;
  padding: 0 4px;
}
.acDC-row-tag {
  display: inline-block;
  height: 16px;
  width: 17px;
  background-color: #ffd100;
  border-radius: 9px;
  text-align: center;
}
.acDC-main-data {
  display: flex;
  padding: 10px;
}
.acDC-main-data > div {
  padding: 0 10px;
  margin: 2px 0;
  border-left: 1px solid rgba(127, 255, 212, 0.5);
}
.acDC-main-data > div > p {
  text-align: center;
}
.acDC-main-data > div > p:nth-child(2) {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.acDC-main-table {
  margin: 0 10px;
  max-height: 160px;
  overflow-y: auto;
  width: calc(100% - 20px);
}
.acDC-main-table table,
.ac-bottom-table table {
  width: 100%;
}
.acDC-main-table th,
.ac-bottom-table th {
  padding-bottom: 10px;
}
.acDC-main-table td,
.ac-bottom-table td {
  padding: 10px 0;
}
.acDC-main-table tbody tr,
.ac-bottom-table tbody tr {
  /* border-top: 1px solid rgba(127, 255, 212, 0.5); */
}
.ac-bottom-table {
  margin: 0 10px;
  max-height: 290px;
  overflow-y: auto;
  width: calc(100% - 20px);
}
.ac-bottom-table p {
  height: 60px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 60px;
}
.acDC-list {
  padding: 10px 4px;
}
.acDC-list > i:nth-child(1) {
  color: aqua;
}
.acDC-list > span:nth-child(2) {
  display: inline-block;
  vertical-align: text-top;
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acDC-list-more {
  text-align: center;
  color: aqua;
  cursor: default;
}
.acDC-weather {
  display: flex;
}
.acDC-weather-data {
  padding: 10px;
  width: 260px;
  flex-grow: 0;
}
.acDC-weather-data > div {
  border-left: 4px solid aqua;
  margin: 10px 0;
  padding-left: 20px;
}
.acDC-weather-data img {
  display: inline-block;
}
.acDC-weather-data p {
  /* text-align: center */
}
.acDC-inline-data {
  display: inline-block;
  vertical-align: middle;
}
.acDC-weather-chart {
  flex-grow: 1;
}
.acDC-weather-chart > p {
  text-align: center;
  margin: 10px 0 0 0;
  font-size: 16px;
}
.acDC-weather-chart > div {
  /* min-width: 500px; */
  width: 100%;
  height: calc(100% - 40px);
}
.acDC-temp-area {
  width: 400px;
  display: flex;
  padding: 5px;
  flex-wrap: wrap;
}
.acDC-temp-area > div {
  width: calc(50% - 10px);
  display: flex;
  justify-content: space-between;
  margin: 5px;
  border: 1px solid aqua;
  border-radius: 4px;
}
.acDC-temp-area > div > span i {
  color: aqua;
}
.acDC-temp-area > div > span {
  padding: 10px;
}
.acDC-temp-area > div > span:nth-child(2) {
  background-color: aqua;
  color: #212121;
}
.acDC-temp-area2 {
  width: 270px;
}
.acDC-temp-area2 > div {
  width: calc(100% - 10px);
}
.acDC-data-card2 {
  margin: 10px;
  padding: 10px;
  width: 360px;
  background-color: #0299fc;
  border-radius: 8px;
}
.acDC-data-card2 > p > * {
  display: inline-block;
}
.acDC-data-card2 > p:nth-child(1) > * {
  width: 50%;
}
.acDC-data-card2 > p:nth-child(1) > *:nth-child(2) {
  text-align: right;
}
.acDC-data-card2 > p:nth-child(2) > * {
  width: 32%;
  text-align: center;
  font-size: 36px;
  font-weight: 900;
}
.acDC-data-card2 > p:nth-child(3) > * {
  width: 32%;
  text-align: center;
}
.acDC-bottom-item {
  display: flex;
}
#chart2 {
  width: 300px;
  height: 85%;
}
#chart3 {
  width: 300px;
  height: 100%;
}
.acDC-bottom-data-line > svg {
  vertical-align: middle;
}
.acDC-button-group {
  display: inline-block;
  /* height: 36px; */
}
.acDC-button-group > button {
  border: 1px solid #d6d6d6;
  border-right: none;
  background-color: transparent;
  color: #fff;
  padding: 0 10px;
  font-weight: 100;
}
.acDC-button-group > button:first-child {
  border-radius: 4px 0 0 4px;
}
.acDC-button-group > button:last-child {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid #d6d6d6;
}
.acDC-select-button {
  border-color: #0299fc !important;
  border-right: 1px solid #0299fc !important;
  color: #0299fc !important;
}
.acDC-input {
  background-color: transparent;
  border: 1px solid #0299fc;
  border-radius: 4px;
  color: #fff;
  padding: 2px 10px;
  font-weight: 100;
  width: 200px;
}
</style>